<template>
	<view class="container">
		<z-paging ref="paging" auto v-model="makeDataList" @query="queryReserveOrderPageByApp">
			<view class="container_box mt10">
				<view v-for="item in makeDataList" :key="item.reserveCode" class="center-item mb15">
					<view class="d-flex mb20">
						<view class="mr10">
							<u--image :showLoading="true" :src="item.reservePicUrl.split('&')[0]" shape="square" radius="16rpx"
								width="160rpx" height="160rpx"></u--image>
						</view>
						<view class="d-flex flex-column j-sb center-item-title">
							<view class="title">{{item.reserveProductName}}</view>
							<view class="d-flex j-sb">
								<view>
									<u-tag :text="item.reserveStatus=='0'?'已预约':'已预约'" type="success" bgColor="#6AD89A"></u-tag>
								</view>
								<view class="price f_family_din">{{item.orderAmount}}</view>
							</view>
						</view>
					</view>
					<view class="center-item-other d-flex j-sb mb15">
						<view>预约编号：</view>
						<view>{{item.reserveCode}}</view>
					</view>
					<view class="center-item-other d-flex j-sb mb15">
						<view>预约时间：</view>
						<view>{{item.reserveDate}}</view>
					</view>
					<view class="center-item-other d-flex j-sb mb15">
						<view>管家回复：</view>
						<view>{{item.replyDesc?item.replyDesc:''}}</view>
					</view>
				</view>
			</view>
		</z-paging>

		<!-- <view style="width: 100%;height: calc(120rpx + env(safe-area-inset-bottom) / 2);"></view> -->
		<!-- <tab-bar-view :tabCode="'1'"></tab-bar-view> -->
	</view>
</template>

<script>
	import {
		queryReserveOrderPageByApp
	} from "@/api/index.js"

	export default {
		onLoad() {
			console.log('onLoad');
		},
		onShow() {
			let make = uni.getStorageSync("make")
			if (make == "1") {
				this.$refs.paging.reload()
			}

			uni.setStorageSync("make", "0")
			console.log('onShow');
		},
		data() {
			return {
				userInfo: uni.getStorageSync('userInfo'),
				makeDataList: [],
			};
		},
		methods: {
			queryReserveOrderPageByApp(pageNo, pageSize) {
				queryReserveOrderPageByApp({
					pageIndex: pageNo,
					pageSize: pageSize,
					customerCode: this.userInfo.customerCode,
				}).then(res => {
					this.$refs.paging.complete(res.object.data);
				})
			},
			goPage(url) {
				console.log(url, '***')
				uni.navigateTo({
					url
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f5f5f5;
	}

	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.container_box {
		display: flex;
		flex-direction: column;
		align-items: center;

	}

	.center-item {
		width: 700rpx;
		height: 430rpx;
		padding: 24rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border: 2rpx solid #ffffff;
		border-radius: 12rpx;

		.center-item-other {
			font-size: 28rpx;
			font-family: Source Han Sans CN, Source Han Sans CN-Regular;
			font-weight: 400;
			color: #333333;
		}

		.center-item-title {
			width: 520rpx;
		}

		.title {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
		}

		.price {
			font-family: Source Han Sans CN, Source Han Sans CN-Regular;
			font-size: 48rpx;
			font-weight: 500;
			color: #333333;
		}
	}
</style>